<!--
 * @Date: 2023-02-23 15:53:56
 * @LastEditors: mengqingchen mengqc1995@163.com
 * @LastEditTime: 2023-03-06 10:48:20
 * @FilePath: \sososn-web-new\src\views\solution\index.vue
-->
<template>
  <div class="solution">
    <div
      class="solution-header flex-col"
      :style="{ background: `url(${imgUrl}) no-repeat`, 'background-size': '100% 100%' }"
    >
      <div class="header-content">
        <p class="text-title">解决方案</p>
        <p class="text-sub">
          从真实应用场景出发，以技术为核心，深入剖析行业难点，为企业提供商业数字化全栈解决方案，满足精准化业务需求。
        </p>
        <div class="btn-box" @click="toLook('方案咨询')"><span>方案咨询</span></div>
      </div>
    </div>
    <div class="solution-wapper">
      <div class="group1">
        <ul class="group1-list flex-row" data-aos="fade-up">
          <li
            v-for="(item, index) in schemeList"
            :key="index"
            class="flex-col"
            :style="{ background: `url(${item.url}) no-repeat`, 'background-size': '100% 100%' }"
          >
            <p class="text-title">{{ item.title }}</p>
            <p class="text-content">{{ item.content }}</p>
            <div class="box-btn">
              <router-link :to="item.to"><span>查看方案</span></router-link>
            </div>
          </li>
        </ul>
      </div>
      <div
        class="group2"
        :style="{ background: `url(${footerUrl}) no-repeat`, 'background-size': '100% 100%' }"
      >
        <div class="group2-content">
          <p class="text-title">方案与架构咨询</p>
          <p class="text-sub">
            关于使用场景和技术架构的更多咨询， 请联系我们的销售和技术支持团队。
          </p>
          <div class="btn-box" @click="toLook('联系我们')"><span>联系我们</span></div>
        </div>
      </div>
    </div>
  </div>
  <contact-dialog v-if="isContactShow" ref="contactRef" v-model="isContactShow" :title="title" />
</template>

<script setup>
const $getAssetsImages = inject('$getAssetsImages')
const imgUrl = $getAssetsImages('solution-bg.png')
const footerUrl = $getAssetsImages('footerUrl.png')

const schemeList = ref([
  {
    title: '大宗建材行业数字化建设解决方案',
    content:
      '建材行业作为中国国民经济发展的重要支柱性产业之一，现阶段总体仍处于粗放式管理水平，缺乏有效的信息化管理，在转型过程中，存在着数据孤岛、杂乱分散等问题，导致运营效率低、成本控制难、综合效益低、成效不够突出。',
    url: $getAssetsImages('scheme-bg1.png'),
    to: '/solutionDetails/bulkMaterials'
  },
  {
    title: '能源行业供应链一体化解决方案',
    content:
      '能源是经济社会发展的基础和动力。如何通过前沿技术的运用，打通不同层级与不同行业间的数据壁垒，构建深入企业肌理的能源化工数字运营体系是每一家能源企业的必经考验。',
    url: $getAssetsImages('scheme-bg2.png'),
    to: '/solutionDetails/energy'
  },
  {
    title: '软件企业数字化转型解决方案',
    content:
      '数字化转型从根本上改变了软件行业的动态。 数字化转型不仅意味着各种新技术的实施，它还专注于采用更好的运营流程和增强客户体验。',
    url: $getAssetsImages('scheme-bg3.png'),
    to: '/solutionDetails/software'
  }
])
let isContactShow = ref(false)
let contactRef = ref(null)
const title = ref('')

const toLook = val => {
  title.value = val
  isContactShow.value = true
  nextTick(() => {
    contactRef.value.dialogVisible = true
  })
}
</script>
<style lang="scss" scoped>
/* @use ''; 引入css类 */
@use './scss/index.scss';
</style>
